<!--头部导航栏。使用了 Vue 3 的 Composition API 和 Vuex 进行状态管理，
同时使用了 Element Plus UI 组件库。-->
<template>
  <!-- 头部容器 -->
  <div class="dingdong-header">
    <!-- 左侧导航菜单组件 -->
    <ding-dong-header-nav class="dingdong-header-nav" :styleList="headerNavList" :activeName="activeNavName" @click="goPage"></ding-dong-header-nav>
    <!--搜索框-->
    <div class="header-search">
      <el-input placeholder="" :prefix-icon="Search" v-model="keywords" @keyup.enter="goSearch()" />
    </div>
    <!--图标-->
    <div class="header-logo" @click="goPage()">
      <!-- 显示音乐名称 -->
      <span>{{ musicName }}</span>
    </div>
    <!-- 用户未登录时显示的导航 -->
    <ding-dong-header-nav v-if="!token" :styleList="signList" :activeName="activeNavName" @click="goPage"></ding-dong-header-nav>
    <!-- 用户已登录时显示的下拉菜单 -->
    <el-dropdown class="user-wrap" v-if="token" trigger="click">
      <el-image class="user" fit="contain" :src="attachImageUrl(userPic)" />
      <template #dropdown>
        <el-dropdown-menu>
          <!-- 遍历菜单项并生成下拉菜单 -->
          <el-dropdown-item v-for="(item, index) in menuList" :key="index" @click.stop="goMenuList(item.path)">{{ item.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, getCurrentInstance, computed, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useStore } from "vuex";
import DingDongHeaderNav from "./DingDongHeaderNav.vue";
import mixin from "@/mixins/mixin";
import { HEADERNAVLIST, SIGNLIST, MENULIST, Icon, MUSICNAME, RouterName, NavName } from "@/enums";
import { HttpManager } from "@/api";
import {onBeforeRouteLeave} from "vue-router";

export default defineComponent({
  components: {
    // 注册组件
    DingDongHeaderNav,
  },
  setup() {
    const { proxy } = getCurrentInstance();// 获取当前组件实例
    const store = useStore();// 使用 Vuex 状态管理
    const { changeIndex, routerManager } = mixin();// 引入混入方法

    // 定义响应式变量
    const musicName = ref(MUSICNAME);// 音乐名称
    const headerNavList = ref(HEADERNAVLIST); // 左侧导航栏
    const signList = ref(SIGNLIST); // 右侧导航栏列表（用户未登录时）
    const menuList = ref(MENULIST); // 用户下拉菜单项
    const iconList = reactive({
      ERJI: Icon.ERJI,// 图标列表
    });
    const keywords = ref("");// 搜索关键词
    // 当前激活的导航名称
    const activeNavName = computed(() => store.getters.activeNavName);
    // 用户头像
    const userPic = computed(() => store.getters.userPic);
    // 用户登录状态（是否有 token）
    const token = computed(() => store.getters.token);

    // 跳转到页面
    function goPage(path, name) {
      if (!path && !name) {
        // 如果没有路径和名称，跳转到首页
        changeIndex(NavName.Home);
        routerManager(RouterName.Home, { path: RouterName.Home });
      } else {
        // 跳转到指定路径和名称
        changeIndex(name);
        routerManager(path, { path });
      }
    }

    // 处理菜单点击事件
    function goMenuList(path) {
      if (path == RouterName.SignOut) {
        // 如果点击的是退出登录，清除 token 并跳转到首页
        proxy.$store.commit("setToken", false);
        changeIndex(NavName.Home);
        routerManager(RouterName.Home, { path: RouterName.Home });
      } else {
        // 跳转到指定路径
        routerManager(path, { path });
      }
    }
    // 执行搜索
    function goSearch() {
      if (keywords.value && keywords.value.trim() !== "") {
        // 如果搜索关键词不为空，提交搜索词并跳转到搜索页面
        proxy.$store.commit("setSearchWord", keywords.value);
        routerManager(RouterName.Search, { path: RouterName.Search, query: { keywords: keywords.value } });
        // 清空搜索关键词
        keywords.value = "";
      } else {
        // 如果搜索关键词为空，显示错误消息
        (proxy as any).$message({
          message: "输入内容为空，请输入搜索内容喔！",
          type: "error",
        });
      }
    }

    return {
      musicName,
      headerNavList,
      signList,
      menuList,
      iconList,
      keywords,
      activeNavName,
      userPic,
      token,
      Search,
      goPage,
      goMenuList,
      goSearch,
      attachImageUrl: HttpManager.attachImageUrl,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/global.scss";

/* 响应式布局 */
@media screen and (min-width: $sm) {
  .header-logo {
    margin: 0 1rem;/* 设置 LOGO 的左右外边距 */
  }
}

@media screen and (max-width: $sm) {
  .header-logo {
    margin: 0 1rem;

    span {
      display: none;/* 在小屏幕上隐藏音乐名称 */
    }
  }
  .header-search {
    display: none;/* 在小屏幕上隐藏搜索框 */
  }
}
/* 头部容器样式 */
.dingdong-header {
  position: fixed; /* 固定头部 */
  width: 100%; /* 头部宽度为 100% */
  height: $header-height; /* 使用变量设置头部高度 */
  line-height: $header-height; /* 行高与头部高度一致，使内容垂直居中 */
  padding: $header-padding; /* 内边距 */
  margin: $header-margin; /* 外边距 */
  background-color: $theme-header-color; /* 背景色 */
  box-shadow: $box-shadow; /* 添加阴影 */
  box-sizing: border-box; /* 计算边框和内边距 */
  z-index: 100; /* 确保头部在最上层 */
  display: flex; /* 使用 Flexbox 布局 */
  white-space: nowrap; /* 防止内容换行 */
  flex-wrap: nowrap; /* 不换行 */
}

/* LOGO */
.header-logo {
  font-size: $font-size-logo; /* 使用变量设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  cursor: pointer; /* 设置鼠标悬停时的样式 */
  .icon {
    @include icon(1.9rem, $color-black); /* 引用图标样式 */
    vertical-align: middle; /* 垂直对齐 */
  }
  span {
    margin-left: 1rem;
    font-size: 2.2rem; // 设置文字大小
    font-family: 'Roboto', sans-serif; // 更改字体
    color: $color-text; // 设置文字颜色
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); // 添加文本阴影

    // 动画效果
    animation: colorChange 5s infinite; // 添加颜色渐变动画
  }
}

/* 使用 CSS 变量 */
.dingdong-header-nav {
  //--font-family: 'Roboto', sans-serif; // 使用相同的字体
  --font-size: 1.2rem; // 设置相同的文字大小
  --color: $color-text; // 使用相同的文字颜色
  --text-shadow: 1px 1px 2px rgba(0,0,0,0.3); // 添加相同的文本阴影

  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color);
  text-shadow: var(--text-shadow);

  /* 动画效果（可选） */
  animation: colorChange 5s infinite; // 如果需要相同的颜色渐变动画
}

/* 动画效果 */
@keyframes colorChange {
  0% {
    color: #f39c12; // 初始颜色
  }
  50% {
    color: #e74c3c; // 中间颜色
  }
  100% {
    color: #f39c12; // 结束颜色
  }
}

/* 头部导航项样式 */
.dingdong-header-nav {
  flex: 1; /* 使导航项均匀分布 */
  margin: 0 20px; /* 设置左右外边距 */
}

/*搜索输入框*/
.header-search {
  margin: 0 100px; /* 设置左右外边距 */
  width: 100%; /* 搜索框宽度为 100% */
  &::v-deep input {
    text-indent: 5px; /* 设置文本缩进 */
    max-width: $header-search-max-width; /* 设置最大宽度 */
    min-width: $header-search-min-width; /* 设置最小宽度 */
    border-radius: $header-search-radius; /* 设置边框圆角 */
    box-shadow: none; /* 去除阴影 */
    background-color: $color-light-grey; /* 背景色 */
    color: $color-black; /* 文字颜色 */
  }
}

/*用户*/
.user-wrap {
  position: relative; /* 相对定位 */
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */

  .user {
    width: $header-user-width; /* 用户头像宽度 */
    height: $header-user-width; /* 用户头像高度 */
    border-radius: $header-user-radius; /* 用户头像圆角 */
    margin-right: $header-user-margin; /* 用户头像右边距 */
    cursor: pointer; /* 鼠标悬停时的样式 */
  }
}
</style>
